/* Default */
@font-face {
    font-family: 'raleway-regular-webfont';
    src: url('../assets/fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../assets/fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Heading - bold */
@font-face {
    font-family: 'scrambled_eggs_bold';
    src: url('../assets/fonts/scrambled_eggs_short_lower_bold-webfont.woff2') format('woff2'),
         url('../assets/fonts/scrambled_eggs_short_lower_bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* Heading - not bold */
@font-face {
    font-family: 'scrambled_eggs';
    src: url('../assets/fonts/scrambled_eggs_short_lowercase-webfont.woff2') format('woff2'),
         url('../assets/fonts/scrambled_eggs_short_lowercase-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
	/* overall page backdrop, fallback for backdrop image */
	--backgroundhtml: #000814;
	/* fallback for background image */
	--backgroundbody: #222222;
	/* border between backdrop and content */
	--borderbody: #2b2b2b;

	/* h1 background, border, text, drop shadow */
	--backgroundhead1: #252428;
	--backgroundhead2: #313033;
	--borderhead: #efb64a;
	--texthead: #f0eff4;
	--drophead: #000814;
	/* h2-6 */
	--backgroundheadsub: #252428;
	
	/* section elements. Background, border*/
	--backgroundpanl: #313033;
	--borderpanl: #efb64a;

	/* main text */
	--textcolour: #ebebeb;
	
	/* links */
	--lightbg_link_colour: #3d2645;
	--lightbg_hover_colour: #832161;
	--darkbg_link_colour: #efb64a;
	--darkbg_hover_colour: #ffa133;
	
	/* gradient colours for page backdrop */
	--grad1: #131212;
	--grad2: #171c1e;
	--grad3: black;
	

	
	/* blockquotes */
	--genquote_background_colour: seashell;
	--genquote_border_colour: #555555;
	--genquote_text_colour: #000814;
	--ficquote_background_colour: #444444;
	--ficquote_border_colour: seashell;
	--ficquote_text_colour: seashell;
	
	/* border radius */
	--bordrad: 0.75em;

	}

html {
	background-color: var(--backgroundhtml); /*fallback*/
	background-image: url('../assets/tasky.png'), 
	
	radial-gradient(var(--grad1), var(--grad2), var(--grad3));
	/* colour order goes from inside to out*/
	
	background-repeat: 
	repeat, /*image*/
	no-repeat; /*gradient*/
		
	background-attachment: 
	fixed, /*image*/
	fixed; /*gradient*/
}

body { 
	margin: auto;

	background-color: var(--backgroundbody); 
	background-image: url('../assets/tactile_noise.png');
	background-attachment: fixed;
	
	font-family: 'raleway-regular-webfont', sans-serif;
	font-size: 1em; 
	color: var(--textcolour); 
}

/* body class for pages to be embedded as iframes */
.embeds, .fullwidth {
	max-width: 100%;
	margin: 0.2em;
	padding: 0.2em;
	
	background-color: var(--backgroundbody); 
	background-image: none;
	
	border: none;
}

/*default link colours*/
a:link, a:visited, a:active { color: var(--darkbg_link_colour); }
a:hover { color: var(--darkbg_hover_colour); }

.mysection, .navsection { 
	padding: 0.4em 1em;
	margin: 1em 0.5em;

	background-color: var(--backgroundpanl);

	border-radius: var(--bordrad);
	}
	
.mysection p, .navsection p, .mysection ul, .mysection li{
	margin: 1em 0.6em 0.8em 0.6em; /* T R B L*/
	} 

.myheader, .mysubheader {
	color: var(--texthead);
}

.myheader {
	background-color: var(--backgroundhead1); /* fallback */
	background: 
		linear-gradient(-75deg, transparent, var(--backgroundhead2)),		
		repeating-linear-gradient(
   		-45deg,
    		var(--backgroundhead1),
    		var(--backgroundhead1) 0.5em,
    		var(--backgroundhead2) 0.5em,
    		var(--backgroundhead2) 1em
		);
	
	padding: 0.4em 1em;
	margin: 0.4em 0.6em; /* top, right, bottom, left */;
	
	border: 2px solid var(--borderhead); 
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	
	font-family: 'scrambled_eggs_bold', sans-serif; 
	text-shadow: 2px 4px var(--drophead);
	}
	
.mysubheader {
	display:inline-block; 
	background-color: var(--backgroundheadsub); 
	
	padding: 0.4em 1em;
	margin: 0.4em 1em; /* top, right, bottom, left */;
	
	border-radius: var(--bordrad);
	
	font-family: 'scrambled_eggs', sans-serif; 
	}

.ficsummaryheader {
	background-color: var(--backgroundheadsub); 
	
	padding: 0.4em 0.6em;
	margin: 0.5em 0.4em; /* top, right, bottom, left */;
	
	border-radius: var(--bordrad);
	
	font-family: 'scrambled_eggs', sans-serif;
	font-size: smaller; 
	} /* is this deprecated? */
	
.headerdec {
	margin: 1em 0.2em;	
	text-align: center;
	}

.sludge {
	padding: 1em 0em;
	background-color: var(--backgroundhtml);
	color: snow;
	border-radius: var(--bordrad);
}

.ficlink { /* poss deprecated */
	font-weight: bold;
	}
	
.exitlink::after {
	content: "🔸";
	}
	
.backlink::before {
	content: "🔙 ";
	}

img {
max-width: 100%;
}

.cartouche { 
	display: inline-block;
	padding: 0.2em 0.6em;
	margin-top: 0.2em;
	border-radius: var(--bordrad);
	}
.char_canon { background-color: var(--char_canon_colour); }
.char_noncanon { background-color: var(--char_noncanon_colour); }
.char_guest { background-color: var(--char_guest_colour); }
.char_canon, .char_noncanon, .char_guest { color: var(--char_text); }
/* stupid hack! */
a.char_canon, a.char_noncanon, a.char_guest { color: var(--char_text); }
a:hover.char_canon, a:hover.char_noncanon, a:hover.char_guest { color: var(--char_hover); }

.char_tv::before { content: "📺 "; }
.char_human::before { content: "👤 "; }
.char_eldritch::before { content: "🪸 "; }
.char_camera::before { content: "📹 "; }
.char_speaker::before { content: "🔊 "; }
.char_skib::before { content: "🚽 "; }
.general_emphasis { 
	background-color: var(--general_emphasis_colour); 
	color: var(--general_emphasis_text); }
.tl_phaeton { background-color: var(--tl_phaeton_colour); }
.tl_standalone { background-color: var(--tl_standalone_colour); }
.tl_prequel { background-color: var(--tl_prequel_colour); }
.tl_divergence { background-color: var(--tl_divergence_colour); }
.tl_phaeton, .tl_standalone, .tl_prequel, .tl_divergence { color: var(--tl_text); }
.datum_wordcount, .datum_pubdate { font-size: 0.8em; }
.datum_wordcount { 
	background-color: var(--wordcount_colour); 
	color: var(--wordcount_text); 
	}
.datum_wordcount::after { content: "k"; }
.datum_pubdate { 
	background-color: var(--pubdate_colour);
	color: var(--pubdate_text);
	}

/* video embed page tweaks, deprecate them */
.boop { padding-bottom: 1em; border-bottom: 1px solid var(--borderpanl); }
.bop { text-align: center; }

/* character page footnotes */
.footnote {
	font-size: 0.75em;
	vertical-align: super;
	font-weight: bold;
	}
.footnote::before { content: "["; }
.footnote::after { content: "]"; }
.backup {
	font-weight: bold;
	}

/* Fic summary */
/* Blockquote breaks flexbox, here's some blockquote-ish dressing*/

.sum_aside_start {
	border-top: 1px dashed var(--sum_background1);
	padding-top: 1em;
	}
.sum_aside_end {
	border-bottom: 1px dashed var(--sum_background1);
	padding-bottom: 1em;
	}

.smalltext {
	font-size: 0.8em;
	}

/* Video embeds */
/* div */
.embed_video {
	max-width: 100%;	
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	}
/* player */
.myvideo {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	}

/* set media width for disappearing */
.chunch {
	display: inline;
	font-weight: bold;
	}

@media (min-width: 700px) {
	body {
		max-width: 72rem;
		padding: 1.6em 2em;
		font-size: 1.3rem; 
		}
	.mytable {
		padding: 0.6em 1em;
		font-size: 1.3em;
		}
	.myquote {
		margin-left: 1.2em;
		margin-right: 1.2em;
		padding: 0.8em;
		}
	.fic_description {
		margin-left: 1em;
		margin-right: 1em;
		padding: 0.4em;
		}
	.myvideo {
		width: 640px;
		height: 360px;
		}
	}

@media (min-width: 800px) {
	body {
		border-width: 0 6px; 
		border-style: double; 
		border-color: var(--borderbody);
		font-size: 1.4rem; 
		}
	.ficindex {
		max-width: 90%;
		}
	}